<template>
  <div class="user_home">
    <x-header :left-options="{showBack: false, backText: ''}">个人中心</x-header>
    <div class="user_info">
      <div class="avatar">
        <img v-if="myInfo.avatar" :src="myInfo.avatar" alt="">
        <img v-else src="./img/default-user.png" alt="">

      </div>

      <div class="info">
        <img src="./img/user.png" alt="">
        <span>{{userInfo.user_login || '未登录'}}</span>
        <img src="./img/sex.png" alt="">
        <span>{{userInfo.sex}}</span>
      </div>

      <group title="" class="user-group">
        <cell title="个人资料" class="user-cell" value="" is-link link="/user/info">
          <img slot="icon" class="user-slot-icon" src="./img/gezx_grzl.png">
        </cell>
        <cell title="所属支部" class="user-cell" value="" is-link
              :link="{name: 'BranchInfo', params: {branchid: myInfo.department_id}}">
          <img slot="icon" class="user-slot-icon" src="./img/gezx_sszb.png">
        </cell>
      </group>

      <group title="" class="user-group">
        <cell title="我的积分" class="user-cell" value="" is-link :link="{name:'Point', params:{userid: userInfo.id}}">
          <img slot="icon" class="user-slot-icon" src="./img/gezx_wdjf.png">
        </cell>
        <!--is-link link="/user/fee"-->
        <cell title="我的党费" class="user-cell" value="" :link="{name: 'Fee', params:{cardid: userInfo.card_no}}">
          <img slot="icon" class="user-slot-icon" src="./img/gezx_wddf.png" alt="">
        </cell>
        <cell title="通讯录" class="user-cell" value="" is-link link="/user/contact">
          <img slot="icon" class="user-slot-icon" src="./img/gezx_txl.png" alt="">
        </cell>
        <cell title="党员心声" class="user-cell" value="" is-link link="/user/voice">
          <img slot="icon" class="user-slot-icon" src="./img/gezx_dyxs.png" alt="">
        </cell>
      </group>

      <group title="" class="user-group">
        <cell title="设置" class="user-cell" value="" is-link link="/user/config">
          <img slot="icon" class="user-slot-icon" src="./img/gezx_sz.png" alt="">
        </cell>
      </group>
    </div>
  </div>
</template>

<script>
import { XHeader, Group, Cell, Flexbox, FlexboxItem } from "vux";
import { mapGetters } from "vuex";
import api from "../../api/index";

export default {
  name: "Home",
  components: {
    XHeader,
    Group,
    Cell,
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      myInfo: {},
      headerImage: require("./img/default-user.png"),
      base64: ""
    };
  },
  //计算属性
  computed: {
    ...mapGetters(["userInfo"])
  },
  //触发事件
  created() {
    // let userid = window.localStorage.getItem("user");
    // this.$store.dispatch("getInfo", { id: userid });
  },

  activated() {
    let userid = window.localStorage.getItem("user");
    this.$store.dispatch("getInfo", { id: userid });
  },

  //侦听属性
  watch: {
    userInfo: function(val) {
      this.myInfo = val;
      if (val.avatar) {
        this.headerImage = val.avatar;
      }
    }
  }
};
</script>

<style lang="less">
.user_home {
  height: 100%;
  .user_info {
    padding: 2.875rem 0 0;
    background: url("./img/bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .avatar {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 1.0625rem 0 0;
    height: 5.6875rem;
    overflow: hidden;
    text-align: center;
    img {
      width: 5.6875rem !important;
      height: 5.6875rem;
      border-radius: 50%;
    }
  }

  .info {
    width: fit-content;
    margin: 0 auto 50/16rem;
    height: 18/16rem;
    line-height: 18/16rem;
    img {
      width: 14/16rem;
      margin-right: 7/16rem;
    }
    span {
      font-size: 18/16rem;
      font-family: "SourceHanSansSC-Light", sans-serif;
      color: rgb(51, 51, 51);
      &:first-of-type {
        margin-right: 33/16rem;
      }
    }
  }

  .weui-cells {
    margin-top: 6/16rem !important;
  }

  .weui-cell__ft {
    font-size: 13/16rem;
  }

  .user-group {
    font-size: 17/16rem;
    font-family: "SourceHanSansSC-Light", sans-serif;
  }

  .user-cell {
    //padding-left: 13/16rem !important;
    //padding-right: 18/16rem !important;
    padding: 5/16rem 18/16rem 5/16rem 13/16rem !important;
  }

  .user-slot-icon {
    display: block;
    width: 31/16rem;
    margin-right: 13/16rem;
  }
}
</style>
